<template>
  <el-container id="main_box">
	  <el-container>

		  <el-aside :width="isCollapse ? '64px' : '200px'">
			<!--侧边栏菜单-->
			<el-menu
			:router="true"
			class="el-menu-vertical-demo"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="orange"
			:unique-opened="true"
			:collapse="isCollapse"
			:collapse-transition="false"
			>
			<span class="geren">个人中心</span><br>
        <router-link to="/" class="geren">返回首页</router-link>
			<el-menu-item index='/grxx'>
				<i class="el-icon-menu"></i>
				<span slot="title">个人信息</span>
			</el-menu-item>
        <el-menu-item index='/PickupAddress'>
          <i class="el-icon-menu"></i>
          <span slot="title">提货地址</span>
        </el-menu-item>
        <el-menu-item index='/myorder'>
          <i class="el-icon-menu"></i>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index='/ShoppingTrolley'>
          <i class="el-icon-menu"></i>
          <span slot="title">我的购物车</span>
        </el-menu-item>
        <el-menu-item index='/MerchantHub'  v-if="merchantTag === 'S001-4'">
          <i class="el-icon-menu"></i>
          <span slot="title">商户管理</span>
        </el-menu-item>
        <el-menu-item index='/shrz'v-else>
          <i class="el-icon-menu"></i>
          <span slot="title">商户入驻</span>
        </el-menu-item>

        <el-menu-item index='/SupplierHomePage' v-if="supplierTag === 'G001-4'">
          <i class="el-icon-menu"></i>
          <span slot="title">供应商管理</span>
        </el-menu-item>
        <el-menu-item index='/supplierRecruitment'v-else>
          <i class="el-icon-menu"></i>
          <span slot="title">供应商招募</span>
        </el-menu-item>
			</el-menu>
		  </el-aside>

		  <el-main>
			  <router-view></router-view>
		  </el-main>
	  </el-container>
  </el-container>
</template>

<script>
export default {
	data() {
	  return {
	    //图标数组
	    iconObj: {
	      '125': 'iconfont icon-user',
	      '103': 'iconfont icon-3702mima',
	      '101': 'iconfont icon-shangpin',
	      '102': 'iconfont icon-danju',
	      '145': 'iconfont icon-baobiao',
	    },
      //是否折叠的标志
      isCollapse: false,
      //商户标志
      merchantTag:this.$store.state.user.merchantTag,
      //供应商标志
      supplierTag:this.$store.state.user.supplierTag,
	  }
	},
	created() {
	  
	},
	methods:{
		
	}
}
</script>

<style scoped>
/* 父容器高度 */
#main_box {
  height: 100%;
}

 /*个人中心span*/
 .geren{
   margin-left: 15%;
   font-size: 20px;
   color: white;
   text-decoration: none;
 }

.el-header {
  background-color: #b3c0d1;
  /*
  在flex 布局的容器中，
  可以设置justify-content: space-between;实现两对齐
  */
  display: flex;
  justify-content: space-between;
  /* 当容器是flext，可以设置 align-items: center */
  align-items: center;
  div {
    display: flex;
    align-items: center;
  }
  span {
    margin-left: 20px;
  }
}

.el-menu {
    border-right: none;
}

.el-main {
  background-color: #e9eef3;
}
</style>